<weui-infiniteloader #divTarget (loadmore)="onLoadMore($event)" [config]="{percent:90,height:'120vh'}">
  <nz-back-top [nzTarget]="divTarget.el.nativeElement.firstChild" ></nz-back-top>
  <weui-searchbar [value]="searchModel.q" (cancel)="onClear()" (search)="onSearch($event)" (clear)="onClear()"
                  (submit)="onSubmit($event)">
  </weui-searchbar>
  <div class="weui-panel mt-0" *ngIf="items | async as items">
    <div class="weui-panel__bd">
      <div class="weui-cell weui-cell_access" *ngFor="let item of items.result">
        <div class="weui-cell__bd weui-cell_primary">
          <p (click)="onSuggest(item[0])">{{item[0]}}</p>
        </div>
      </div>
      <div class="weui-media-box weui-media-box_text" *ngIf="items?.length === 0">Can't find any！</div>
    </div>
  </div>
  <!-----------类目选择-------------->
  <div class="form-row px-1 mx-0 w-100">
    <div class="col-12">
      <ul class="p-0 m-0 d-flex justify-content-between" nz-menu [nzMode]="'horizontal'">
        <li nz-menu-item><a href="javascript:void(0);" (click)="select(1)">综合</a></li>
        <li nz-menu-item><a href="javascript:void(0);" (click)="select(2)">价格</a></li>
        <li nz-menu-item><a href="javascript:void(0);" (click)="select(3)">销量</a></li>
        <li nz-menu-item><a href="javascript:void(0);" (click)="select(4)">佣金</a></li>
      </ul>
    </div>
    <div class="col-12">
      <ul id="subMenu" class="p-0 m-0 d-flex justify-content-between" nz-menu [nzMode]="'horizontal'">
        <li nz-menu-item [nzSelected]="false"><span class="mr-1">只看有券:</span>
          <nz-switch [ngModel]="searchModel.hasCoupon"
                     (ngModelChange)="select(5)"
                     [nzCheckedChildren]="checkedTemplate"
                     [nzUnCheckedChildren]="unCheckedTemplate"></nz-switch>
        </li>
        <li nz-menu-item [nzSelected]="false"><span class="mr-1">只看天猫:</span>
          <nz-switch [ngModel]="searchModel.isTmall"
                     (ngModelChange)="select(6)"
                     [nzCheckedChildren]="checkedTemplate"
                     [nzUnCheckedChildren]="unCheckedTemplate"></nz-switch>
        </li>
      </ul>
      <ng-template #checkedTemplate><i nz-icon type="check" style="vertical-align:0.8rem;"></i></ng-template>
      <ng-template #unCheckedTemplate><i nz-icon type="close" style="vertical-align:0.8rem;"></i></ng-template>
    </div>
  </div>
  <div class="container-fluid">
    <ng-container *ngFor="let item of pageModels">
      <div class="row" *ngIf=" item | async as goodsList else loadMore">
        <div class="col-6 col-md-3 p-1" *ngFor="let goods of goodsList?._embedded?.arrayNodes[0]?.content">
          <a [routerLink]="['/detail',goods.item_id]">
            <div class="card p-1">
              <img [src]="goods.pict_url"
                   class="card-img-top" [alt]="goods.title">
              <div class="card-body">
                <p class="card-title"><img src="assets/images/taobao/ic_celect.png">{{goods.title}}</p>
                <div class="card-text fq-goods-money">
                  <div class="fq-goods-free">
                    {{ goods.coupon_remain_count > 0 ? '券后' : '折后'}}
                    <span>￥{{(goods.coupon_remain_count > 0 ? goods.zk_final_price - goods.coupon_amount : goods.zk_final_price)|number:'1.1-2'}}</span>
                  </div>
                  <div *ngIf=" goods.coupon_remain_count>0" class="fq-goods-ticket">
                    <span>券</span><span>￥{{goods.coupon_amount}}</span></div>
                </div>
                <div class="card-text fq-goods-money">
                  <span class="fq-goods-sale">已售{{goods.volume}}</span>
                  <span class="fq-goods-mark">
                    <img src="http://img.fqapps.com/FiOqCid39BXPRU38KTwj9oG-vyKe-600"></span>
                </div>
                <div class="card-text fq-goods-shop text-muted text-truncate my-2 py-1 text-center rounded-pill">
                  <i class="fas fa-shopping-basket"></i>{{goods.nick}}
                </div>
              </div>
            </div>
          </a>
        </div>
      </div>
    </ng-container>
  </div>
  <ng-template #loadMore>
    <div class="page-single">
      <div class="container">
        <weui-loadmore [type]="ptrLoading" [loadingText]="'正在加载中....'" [lineText]="'暂时没有商品哦!'"></weui-loadmore>
      </div>
    </div>
  </ng-template>
  <div class="footer">
    <div class="d-flex justify-content-center">Copyright &copy; 2008-2019 AlexBob</div>
  </div>
</weui-infiniteloader>
